<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>纯CSS3实现超酷的鼠标悬停效果</title>

	<link rel="stylesheet" type="text/css" href="css/style.css" />

	<style>
		.demo {
			width: 360px;
			margin: 60px auto 10px auto
		}

		@media only screen and (min-width: 420px) {
			.demo {
				width: 800px;
				margin: 60px auto 10px auto
			}
		}

		.box {
			float: left;
			width: 380px;
			height: 260px
		}

		.clear {
			clear: both
		}
	</style>

</head>

<body>

	<div class="demo">

		<div class="box">
			<div class="he_border1">
				<img class="he_border1_img" src="images/pro_1.jpg" alt="Image 01">
				<div class="he_border1_caption">
					<h3 class="he_border1_caption_h">WEB前端大仙</h3>
					<p class="he_border1_caption_p">御剑乘风来 除魔天地间</p>
				</div>
			</div>
		</div>

		<div class="box">
			<div class="he_border2">
				<img class="he_border2_img" src="images/pro_2.jpg" alt="Image 01">
				<div class="he_border2_caption">
					<h3 class="he_border2_caption_h">WEB前端大仙</h3>
					<p class="he_border2_caption_p">御剑乘风来 除魔天地间</p>
				</div>
			</div>
		</div>

		<div class="box">
			<div class="he_3DFlipX">
				<div class="he_3DFlipX_inner">
					<div class="he_3DFlipX_img">
						<img src="images/pro_3.jpg" alt="img01">
					</div>
					<div class="he_3DFlipX_caption">
						<h3>WEB前端大仙</h3>
						<p>御剑乘风来 除魔天地间</p>
					</div>
				</div>
			</div>
		</div>

		<div class="box">
			<div class="he_3DFlipY">
				<div class="he_3DFlipY_inner">
					<div class="he_3DFlipY_img">
						<img src="images/pro_1.jpg" alt="img01">
					</div>
					<div class="he_3DFlipY_caption">
						<h3>WEB前端大仙</h3>
						<p>御剑乘风来 除魔天地间</p>
					</div>
				</div>
			</div>
		</div>

		<div class="box">
			<div class="he_ZoomInImg">
				<img class="he_ZoomInImg_img" src="images/pro_2.jpg" alt="Image 01">
				<div class="he_ZoomInImg_caption">
					<h3 class="he_ZoomInImg_caption_h">WEB前端大仙</h3>
					<p class="he_ZoomInImg_caption_p">御剑乘风来 除魔天地间</p>
				</div>
			</div>
		</div>

		<div class="box">
			<div class="he_ZoomOutImg">
				<img class="he_ZoomOutImg_img" src="images/pro_3.jpg" alt="Image 01">
				<div class="he_ZoomOutImg_caption">
					<h3 class="he_ZoomOutImg_caption_h">WEB前端大仙</h3>
					<p class="he_ZoomOutImg_caption_p">御剑乘风来 除魔天地间</p>
				</div>
			</div>
		</div>

		<div class="box">
			<div class="he_slideCaptionDown">
				<img class="he_slideCaptionDown_img" src="images/pro_1.jpg" alt="Image 01">
				<div class="he_slideCaptionDown_caption">
					<h3 class="he_slideCaptionDown_caption_h">WEB前端大仙</h3>
					<p class="he_slideCaptionDown_caption_p">御剑乘风来 除魔天地间</p>
				</div>
			</div>
		</div>

		<div class="box">
			<div class="he_slideAllDown">
				<img class="he_slideAllDown_img" src="images/pro_2.jpg" alt="Image 01">
				<div class="he_slideAllDown_caption">
					<h3 class="he_slideAllDown_caption_h">WEB前端大仙</h3>
					<p class="he_slideAllDown_caption_p">御剑乘风来 除魔天地间</p>
				</div>
			</div>
		</div>

		<div class="clear"></div>

	</div>

</body>

</html>